<template>
  <div>
    <v-form
      ref="form"
      :lazy-validation="false"
    >
    <v-row>
      <v-col cols="10">
        <v-card flat>
          <v-card-text>
            <v-expansion-panels
              v-model="panel"
              multiple
              tile
            >
              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>订单基本信息</v-expansion-panel-header>
                <v-divider />
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;"><small class="red--text mr-1">({{$t('other.required')}})</small>团号：</label>
                        <div class="pr-4 flex-grow-1 d-flex align-center">
                          <SelectGroupcode v-model="formData.code_sign1" outlined/>
                          <span class="mx-1">-</span>
                          {{ dayjs(detailData.plan_date).format('YYYYMMDD') }}
                          <span class="mx-1">-</span>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;"><small class="red--text mr-1">({{$t('other.required')}})</small>产品名称：</label>
                        <div class="pr-4 flex-grow-1 d-flex align-center">
                          <v-text-field v-model="formData.foundation_prodcut_name"></v-text-field>
                          <SelectProduct class="ml-10" @selection="handleChangeProduct"/>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;"><small class="red--text mr-1">({{$t('other.required')}})</small>接团/散团：</label>
                        <div class="pr-4 flex-grow-1">
                          <date-picker v-model="formData.range_date" small></date-picker>
                        </div>
                      </v-row>
                    </v-col>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">行程天数：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-menu :close-on-content-click="false" bottom offset-y>
                            <template v-slot:activator="{ on, attrs }">
                              <v-text-field v-model="formData.day_num" v-bind="attrs" readonly v-on="on"></v-text-field> <!-- *** -->
                            </template>
                            <div class="px-4 flex-grow-1 d-flex align-center white">
                              <v-text-field type="number" v-model.number="formData.day_num"></v-text-field>
                              <span class="mr-12">天</span>
                              <v-text-field type="number" v-model.number="formData.day_num"></v-text-field>
                              <span>晚</span>
                              <v-spacer />
                            </div>
                          </v-menu>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">出发地：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field v-model="formData.from_city"></v-text-field> <!-- *** -->
                        </div>
                      </v-row>
                    </v-col>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">目的地：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field v-model="formData.dest_city"></v-text-field> <!-- *** -->
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">团队人数：</label>
                        <div class="pr-4 flex-grow-1 d-flex align-center flex-nowrap">
                          <v-text-field
                            v-model.number="formData.adult_num"
                            label="成人"
                            type="number"
                            :rules="[rules.required]"
                            required
                            class="mr-10"
                            >
                          </v-text-field>
                          <v-text-field
                            v-model.number="formData.bedkid_num"
                            label="儿童"
                            type="number"
                            class="mr-10"
                            >
                          </v-text-field><v-text-field
                            v-model.number="formData.leader_num"
                            label="领队"
                            type="number"
                            class="mr-10"
                            >
                          </v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">订团日期：</label>
                        <div class="pr-4 flex-grow-1">
                          <date-picker type="date" v-model="formData.order_date"></date-picker> <!-- *** -->
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">用房数量：</label>
                        <div class="pr-4 flex-grow-1 d-flex align-center">
                          <v-text-field
                            v-model.number="formData.sgl"
                            type="number"
                            >
                          </v-text-field>
                          <span class="mr-10">SGL</span>
                          <v-text-field
                            v-model.number="formData.twn"
                            type="number"
                            >
                          </v-text-field>
                          <span class="mr-10">TWN</span>
                          <v-text-field
                            v-model.number="formData.trp"
                            type="number"
                            >
                          </v-text-field>
                          <span class="mr-10">TRP</span>
                          <v-text-field
                            v-model.number="formData.dbl"
                            type="number"
                            >
                          </v-text-field>
                          <span class="mr-10">DBL</span>
                          <v-text-field
                            v-model.number="formData.honeymood"
                            type="number"
                            >
                          </v-text-field>
                          <span class="mr-10">HNM</span>
                          <v-text-field
                            v-model.number="formData.tl"
                            type="number"
                            >
                          </v-text-field>
                          <span class="mr-10">TL</span>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>客户信息</span>
                    <SelectCustomer v-if="type==1" @selection="handleChangeCustomer"/>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-container class="py-0" v-if="type == 1">
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;"><small class="red--text mr-1">({{$t('other.required')}})</small>客户名称：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field
                            v-model="formData.company_name"
                            :rules="[rules.required]"
                            required>
                          </v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">联系人：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field
                            v-model="formData.operator_a"
                            clearable>
                          </v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">联系电话：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field
                            v-model="formData.operator_a_phone"
                            clearable>
                          </v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">甲方团号：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field
                            v-model="formData.code_a"
                            clearable>
                          </v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">客源地：</label>
                        <div class="pr-4 flex-grow-1">
                          <dict-combobox 
                            v-model="formData.source" 
                            single-line
                            item-value="value"
                            type="customersource"/>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">我司收款账号：</label>
                        <div class="pr-4 flex-grow-1">
                          <SelectBank chips deletable-chips multiple/>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <!-- <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">接机牌：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            counter
                            rows="2"
                            no-resize
                            clearable
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row> -->
                </v-container>
                <el-table 
                  :data="childs"
                  border
                  v-if="type == 2">
                  <el-table-column
                    type="index"
                    label="序号"
                    width="60">
                  </el-table-column>
                  <el-table-column
                    prop="company_name"
                    label="客户名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="operator_a"
                    label="联系人"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="operator_a_phone"
                    label="联系电话"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="团队人数"
                    width="220">
                    <template slot-scope="{ row }">
                      <span class="mr-2" v-if="row.adult_num">成人X{{row.adult_num}}</span>
                      <span class="mr-2" v-if="row.bedkid_num">儿童X{{row.bedkid_num}}</span>
                      <span v-if="row.leader_num">领队X{{row.leader_num}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="cal_people_num"
                    label="计算人数"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    label="用房数量"
                    width="280">
                    <template slot-scope="{ row }">
                      <span class="mr-2" v-if="row.sgl">SGL({{row.sgl}})</span>
                      <span class="mr-2" v-if="row.twn">SGL({{row.twn}})</span>
                      <span class="mr-2" v-if="row.trp">TRP({{row.trp}})</span>
                      <span class="mr-2" v-if="row.dbl">DBL({{row.dbl}})</span>
                      <span class="mr-2" v-if="row.honeymood">HNM({{row.honeymood}})</span>
                      <span class="mr-2" v-if="row.tl">TL({{row.tl}})</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="total_cost"
                    label="应收总额"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="code_a"
                    label="甲方团号"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="code_a"
                    label="客源地"
                    width="120">
                  </el-table-column>
                  <!-- <el-table-column
                    label="操作"
                    align="center"
                    width="100">
                    <template slot-scope="{ row }">
                      <v-btn small color="info" outlined>编辑</v-btn>
                    </template>
                  </el-table-column> -->
                </el-table>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <div class="d-flex align-center">
                      <span class="mr-8">团费信息</span>
                      <v-select
                        v-model="cost"
                        :items="childs"
                        item-text="company_name"
                        item-value="id"
                        return-object
                        hide-details
                        dense
                        @change="handleChangeTourfeeData"
                        style="width: 360px">
                      </v-select>
                    </div>
                    <!-- <SelectTourfee :selected="selecteTourfee" @change="handleChangeTourfee"/> -->
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">币种：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-select :items="['人民币·CNY', '泰铢·THB']"></v-select>
                        </div>
                      </v-row>
                    </v-col>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">汇率：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field
                            v-model="cost.cal_people_num"
                            hide-details
                            single-line
                            solo
                            flat
                            readonly>
                          </v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">计算人数：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field v-model="cost.cal_people_num"></v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">结算日期：</label>
                        <div class="pr-4 flex-grow-1">
                          <date-picker type="date"></date-picker>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
                <v-divider />
                <el-table
                  :data="tourfeeData"
                  :summary-method="getSummaries"
                  border
                  show-summary>
                  <el-table-column
                    label="费用项目"
                    prop="name"
                    width="240">
                    <template slot="header">
                      <span class="mr-1">费用项目</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.project_name"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                        disabled
                        readonly
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="180"
                    prop="price"
                    label="单价">
                    <template slot="header">
                      <span class="mr-1">单价</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model.number="row.price"
                        type="number"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                        readonly
                        disabled
                        @input="inputTourfeeItem(row)"
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="180"
                    prop="num"
                    label="数量">
                    <template slot="header">
                      <span class="mr-1">数量</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model.number="row.count"
                        type="number"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                        readonly
                        disabled
                        @input="inputTourfeeItem(row)"
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="180"
                    prop="price_total"
                    label="合计金额">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.price_total"
                        outlined
                        single-line
                        hide-details
                        dense
                        readonly
                        disabled
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="remark"
                    label="备注">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.remark"
                        outlined
                        single-line
                        hide-details
                        dense
                        readonly
                        disabled
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    :label="$t('other.action')"
                    width="80">
                    <template slot-scope="{ $index }">
                      <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                    </template>
                  </el-table-column>
                </el-table>
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">团费说明：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            v-model="formData.detail.outlay"
                            counter
                            rows="2"
                            no-resize
                            clearable
                            readonly
                            disabled
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
              </v-expansion-panel>

              <v-expansion-panel readonly :disabled="type == 2">
                <v-expansion-panel-header hide-actions>购物与自费</v-expansion-panel-header>
                <v-divider />
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">购物安排：</label>
                        <div class="pr-4 flex-grow-1">
                          <DictCombobox chips deletable-chips :disabled="type == 2" v-model="formData.detail.shoppingArr" multiple type="shopping"/>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">自费项目：</label>
                        <div class="pr-4 flex-grow-1">
                          <DictCombobox chips deletable-chips :disabled="type == 2" v-model="formData.detail.self_costArr" multiple type="selfcost"/>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>事项备注</v-expansion-panel-header>
                <v-divider />
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">订房备注：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            v-model="formData.detail.room_remark"
                            counter
                            rows="2"
                            no-resize
                            clearable
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">订车备注：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            v-model="formData.detail.car_remark"
                            counter
                            rows="2"
                            no-resize
                            clearable
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">订餐备注：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            v-model="formData.detail.restaurant_remark"
                            counter
                            rows="2"
                            no-resize
                            clearable
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">景点备注：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            v-model="formData.detail.scenery_remark"
                            counter
                            rows="2"
                            no-resize
                            clearable
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">导游备注：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            v-model="formData.detail.guide_remark"
                            counter
                            rows="2"
                            no-resize
                            clearable
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">结账单备注：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            v-model="formData.detail.checkout_remark"
                            counter
                            rows="2"
                            no-resize
                            clearable
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">其它备注：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-textarea
                            v-model="formData.detail.remark"
                            counter
                            rows="2"
                            no-resize
                            clearable
                            >
                          </v-textarea>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="2">
        <v-banner sticky single-line>
          <v-row class="py-2">
            <v-col cols="5"><v-btn style="width: 80px;" @click="handleSave(1)" color="info" >预留占位</v-btn></v-col>
            <v-col cols="5"><v-btn style="width: 80px;" @click="handleSave(2)" color="primary">确认订单</v-btn></v-col>
            <!-- <v-col cols="4"><v-btn style="width: 100px;" @click="$router.back()">返回</v-btn></v-col> -->
          </v-row>
          <v-stepper class="elevation-0" v-model="step" non-linear vertical>
            <v-stepper-step editable step="1">
              基本信息
            </v-stepper-step>
            <v-stepper-content step="1">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="2">
              客户信息
            </v-stepper-step>
            <v-stepper-content step="2">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="3">
              团费信息
            </v-stepper-step>
            <v-stepper-content step="3">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="4">
              购物与自费
            </v-stepper-step>
            <v-stepper-content step="4">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="5">
              事项备注
            </v-stepper-step>
          </v-stepper>
        </v-banner>
      </v-col>
    </v-row>
    </v-form>
  </div>
</template>

<script>
import * as groupApi from '@/api/group'
import { addSpOrder } from '@/api/group'
import SelectGroupcode from '@/views/plan/components/select-groupcode'
import SelectProduct from '@/views/plan/components/select-product'
import SelectCustomer from '@/views/plan/components/select-custom'
import SelectBank from '@/views/plan/components/select-bank'
import SelectTourfee from '@/views/plan/components/select-tourfee'
import dayjs from 'dayjs'
export default {
  components: {
    SelectGroupcode,
    SelectProduct,
    SelectCustomer,
    SelectBank,
    SelectTourfee
  },
  created() {
    this.setId()
    this.__inited__ = false
  },
  activated() {
    if(this.__inited__) {
      this.setId()
    }
  },
  deactivated() {
    this.__inited__ = true
  },
  props: {
    value: [String, Object]
  },
  data() {
    return {
      id: undefined,
      detailData: '',
      childs: [],
      cost: '',

      panel: [0, 1, 2, 3, 4, 5],

      step: '0',
      
      formData: {
        range_date: [],
        plan_date: '',
        back_date: '',
        day_num: undefined,
        code_sign1: '',
        adult_num: '',
        bedkid_num: '',
        leader_num: '',
        order_date: '',
        company_id: undefined,
        foundation_prodcut_name: '',
        code_a: '',
        company_name: '',
        operator_a: '',
        source: '',
        telphone: '',
        sgl: '',
        twn: '',
        trp: '',
        dbl: '',
        honeymood: '',
        tl: '',
        detail: {
          outlay: '',
          room_remark: '',
          car_remark: '',
          restaurant_remark: '',
          scenery_remark: '',
          guide_remark: '',
          remark: '',
          checkout_remark: '',
          shoppingArr: [],
          self_costArr: []
        }
      },

      rules: {
        required: value => !!value || 'required',
      },

      tourfeeData: [],
    }
  },
  computed: {
    selecteTourfee: {
      get() {
        return this.tourfeeData
      }
    },
    type() {
      return this.detailData.type
    }
  },
  methods: {
    dayjs,
    handleChangeProduct(val) {
      console.log(val)
      this.formData.foundation_prodcut_name = val.name
    },
    handleChangeCustomer(e) {
      console.log(e)
    },
    setId() {
      this.id = this.$route.query.id
      this.getDetail()
    },
    // 计算合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 4 || index === 1 || index === 2) {
          sums[index] = '';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += ' 元';
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },

    // 设置客户信息
    setCompany(data) {
      this.formData.company_id = data.company_id
      this.formData.company_name = data.company_name
      this.formData.operator_a = data.operator_a
      this.formData.source = data.source
      this.formData.operator_a_phone = data.operator_a_phone
    },
    getDetail() {
      groupApi.getPlanDetail({id: this.id}).then(res => {
        this.detailData = res.data
        this.$emit('input', this.detailData)
        for(let key in this.formData) {
          this.formData[key] = res.data[key]
        }
        if(res.data.type == 2) {
          this.formData.range_date = [res.data.plan_date, res.data.back_date]
          this.childs = res.data.childs
          this.cost = this.childs[0]
        } else {
          // this.setCompany({
          //   // company_id: company.id,
          //   company_name: res.data.company_name,
          //   operator_a: res.data.operator_a,
          //   operator_a_phone: res.data.operator_a_phone,
          //   source: res.data.source,
          // })
        }
      })
    },

    setTourfeeData(data) {
      this.tourfeeData = data
    },

    handleChangeTourfeeData(e) {
      // console.log(e.detail.cost)
      this.tourfeeData = e.detail.cost || []
    },
    // 添加费用项目
    handleChangeTourfee(selection) {
      this.tourfeeData.push(...selection.map(item => {
        return {
          id: undefined,
          project_name: item.name,
          currency: 'CNY',
          price: '',
          count: '',
          price_total: '',
          remark: ''
        }
      }))
    },

    // 删除费用项目
    handleRmoveTourfee(index) {
      this.tourfeeData.splice(index, 1)
    },

    handleSave(type) {
      console.log(this.formData, this.tourfeeData)
      // addSpOrder
      if(this.$refs.form.validate()) {
        this.formData.foundation_prodcut_name = this.detailData.foundation_prodcut_name
        this.formData.status = type
        this.formData.plan_date = this.detailData.plan_date
        this.formData.day_num = this.detailData.day_num
        this.formData.planBudget = this.tourfeeData
        addSpOrder(this.formData).then(res => {
          console.log(res)
        })
      }
    },

    // 费用项目 计算总金额
    inputTourfeeItem(row) {
      row.price_total = (row.price || 0) * (row.count || 0)
    },

    // 选择客户更改时
    handleChangeCustom(selection) {
      this.setCompany({
        company_id: selection.id,
        company_name: selection.name,
        operator_a: selection.contact,
        source: selection.source,
        operator_a_phone: selection.telphone
      })
    }
  }
}
</script>

<style>
  .form-item-border {
    outline: 1px solid #dcdee0;
    background: #fff;
    min-height: 70px;
  }
</style>